require("./base-css.js");
var React = require("react");
var Divider = require("./divider");
var ReqDetail = require("./req-detail");
var ResDetail = require("./res-detail");
var ExpandCollapse = require("./expand-collapse");
var util = require("./util");

var Inspector = React.createClass({
  getInitialState: function() {
    return {
      showRequest: false,
      showResponse: true
    };
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    if (JSON.stringify(nextState) !== JSON.stringify(this.state)) {
      return true;
    }
    var hide = util.getBoolean(this.props.hide);
    if (hide != util.getBoolean(nextProps.hide)) {
      return true;
    }
    if (hide) {
      return false;
    }
    var modal = this.props.modal;
    var newModal = nextProps.modal;
    if (!modal || modal !== newModal) {
      return true;
    }

    return !this.endTime;
  },
  toggle: function(field) {
    const newState = {
      [field]: !this.state[field]
    };
    this.setState(newState);
  },
  toggleRequest: function() {
    this.toggle("showRequest");
  },
  toggleResponse: function() {
    this.toggle("showResponse");
  },
  render: function() {
    var props = this.props;
    var modal = props.modal;
    var showRequest = this.state.showRequest;
    console.log("xiaojianfeng log:", "modal3", modal, showRequest);
    var showResponse = this.state.showResponse;
    var url = modal && modal.url;
    var realUrl = modal && modal.realUrl;
    this.endTime = modal && (modal.endTime || modal.lost);

    const requestUI = (
      <div className="fill orient-vertical-box">
        <div className="w-detail-inspectors-title">
          <span className="glyphicon glyphicon-arrow-right"></span>Request
        </div>
        <ReqDetail modal={modal} />
      </div>
    );
    const responseUI = (
      <div className="fill orient-vertical-box">
        <div className="w-detail-inspectors-title">
          <span className="glyphicon glyphicon-arrow-left"></span>Response
        </div>
        <ResDetail modal={modal} />
      </div>
    );
    let output;
    if (showRequest && showResponse) {
      output = (
        <Divider vertical="true">
          {requestUI}
          {responseUI}
        </Divider>
      );
    } else {
      if (showRequest) {
        output = requestUI;
      } else if (showResponse) {
        output = responseUI;
      }
    }

    return (
      <div
        className={
          "fill orient-vertical-box w-detail-inspectors" +
          (util.getBoolean(this.props.hide) ? " hide" : "")
        }
      >
        <div className="box w-detail-inspectors-url" title={url}>
          <label>Url</label>
          <div className="fill">
            <ExpandCollapse text={realUrl || url} />
          </div>
        </div>
        <div>
          <label className="w-log-expand-root">
            <input
              type="checkbox"
              defaultChecked={showRequest}
              onChange={this.toggleRequest}
            />
            showRequest
          </label>
          <label className="w-log-expand-root">
            <input
              type="checkbox"
              defaultChecked={showResponse}
              onChange={this.toggleResponse}
            />
            showResponse
          </label>
        </div>

        {output}
      </div>
    );
  }
});

module.exports = Inspector;
